<template>
	<view >
		<view class="page" v-if="userInfo.state === 0 && applyInfo.state ===1">
			<view class="applyform">
				<view class="apply-icon">
					<span class="iconfont icon-biaodan"></span>
					</view>
				<view class="describe"><p>申请接单常见问题说明</p></view>
				<view class="form-item">
					<view class="form-label">姓名:</view>
					<input type="text" placeholder="请输入你的姓名" v-model="name" maxlength="11" />
				</view>
				<view class="form-item">
					<view class="form-label">学号:</view>
					<input type="text" placeholder="请输入你的学号" v-model="studentNum" maxlength="13"/>
				</view>
				<view class="id-add" >
					<view class="id-title">相关证件证明:</view>
					<view class="id-input" @click="updateImg">
						<img :src="student_crad_pic" alt=""  v-if="student_card_pic"/>
						<span v-else>+</span>
					</view>
				</view>
				<view class="copywechat" @click="confirmWx">
					<p>点击复制管理员微信进行加急审核</p>
				</view>
				<view class="agreement" >
					<span class="iconfont icon-biaodan"></span>
					<p>电子协议</p>
					<span class="iconfont icon-jiantou"></span>
				</view>
				<view class="submit-btn" @click="submit">
					提交申请
				</view>
			</view>
		</view>
		<view v-else-if="userInfo.state === 0 && applyInfo.state === 0" class="info">
			<view style="text-align: center; font-size: 36rpx; font-weight: 600;">
			  申请信息
			</view>
			<view>
			  姓名：{{ applyInfo.name }}
			  <text style="background-color: #2fadd3;">申请中</text>
			</view>
			<view>
			  学号：{{ applyInfo.studentNum }}
			</view>
			<view>
			  学生证：
			  <image :src="applyInfo.student_crad_pic" alt="" mode="widthFix"/>
			</view>
		  </view>
		  <view v-else-if="userInfo.state === 1 && applyInfo.state === 1" class="info">
				<view style="text-align: center; font-size: 36rpx; font-weight: 600;">
				  申请信息
				</view>
				<view>
				  姓名：{{ applyInfo.name }}
				  <text style="background-color: #2fadd3;">申请通过</text>
				</view>
				<view>
				  学号：{{ applyInfo.studentNum }}
				</view>
				<view>
				  学生证：
				  <image :src="applyInfo.student_crad_pic" alt="" mode="widthFix"/>
				</view>
		  </view>
		  <view v-else-if="userInfo.state === 0 && applyInfo.state === 2" class="info">
		  				<view style="text-align: center; font-size: 36rpx; font-weight: 600;">
		  				  申请信息
		  				</view>
		  				<view>
		  				  姓名：{{ applyInfo.name }}
		  				  <text style="background-color: #2fadd3;">申请未通过</text>
		  				</view>
		  				<view>
		  				  学号：{{ applyInfo.studentNum }}
		  				</view>
		  				<view>
		  				  学生证：
		  				  <image :src="applyInfo.student_crad_pic" alt="" mode="widthFix"/>
		  				</view>
		  </view>
	</view>
	
</template>

<script>
	import { applyState,apply } from '../../api/index.js';
	export default {
		data() {
			return {
				userInfo:null,
				applyInfo:{
					state:''
				},
				name:'',
				studentNum:'',
				student_crad_pic:'',
				users_id:''
			}
		},
		created(){
			this.userInfo = uni.getStorageSync('userInfo');
			this.getApply()
		},
		methods: {
			//查看申请状态
			getApply(){
				applyState(this.userInfo.id).then(res=>{
					console.log(res);
					if(res.data.status === 0){
						this.applyInfo = res.data.apply[0];
						this.userInfo = {
							...this.userInfo,
							real_name:res.data.apply[0].name,
							studentNum:res.data.apply[0].studentNum,
							student_crad_pic:res.data.apply[0].student_crad_pic
						}
						console.log(this.userInfo,8888)
						//存储姓名 学号 学生证到userInfo
						uni.setStorageSync('userInfo',this.userInfo);
						console.log(uni.setStorageSync('userInfo',this.userInfo),9999)
					}else{
						uni.showToast({
							title:"未申请"
						})
						this.applyInfo.state = 1
					}
				})
			},
			confirmWx(){
				uni.setClipboardData({
					data:"15733022390",
									showToast:true,
									success:(res) => {
											// log(res)
											uni.showToast({
												title:"复制微信成功"
											})
										}
				})
			},
			updateImg(){
				console.log('用户点击了上传按钮')
				uni.chooseMessageFile({
					count:1,
					type:'image',
					success:(res=>{
						console.log(res,"上传了")
						let imageUrl = res.tempFiles[0].path
						uni.uploadFile({
							url:'http://8.140.198.52:8001/common/uploadFile',
							filePath:imageUrl,
							name:'file',
							header:{
								"Authorization":uni.getStorageSync('token'),
								"content-type":'multipart/form-data',
							},
				
							success:(res=>{
								console.log(res,'图片在服务器上的地址')
								this.student_crad_pic = res.data
							})
						})
					})
				})
			},
			submit(){
				let obj = {
					name:this.name,
					studentNum:this.studentNum,
					student_crad_pic:this.student_crad_pic,
					users_id:uni.getStorageSync("userInfo").id
				}
				apply(obj).then(res=>{
					if(res.data.status === 0){
						//保存修改成功
						uni.showToast({
							title:"申请成功"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	width: 100%;
	height: 100%;
	background-color: #F2F2F2;
	padding-top: 80rpx;
	.applyform{
		width: 90%;
		height: 100vh;
		background-color: white;
		margin: 0 auto;
		border-radius: 20rpx;
		.submit-btn{
			width: 90%;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #4678CC;
			margin: 0 auto;
			position: relative;
			top:130rpx;
			border-radius: 50rpx;
			text-align: center;
			color: white;
		}
		.agreement{
			width: 90%;
			height: 100rpx;
			line-height: 100rpx;
			// background-color: red;
			display: flex;
			justify-content: space-between;
			position: relative;
			top:100rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid gainsboro;
			p{
				position: relative;
				left: -200rpx;
			}
		}
		.copywechat{
			width: 90%;
			height: 100rpx;
			line-height: 100rpx;
			// background-color: red;
			margin: 0 auto;
			text-align: center;
			position: relative;
			top:80rpx;
			border: 2rpx solid #4678CC;
			border-radius: 20rpx;
			color: #4678CC;
		}
		.id-add{
			width: 90%;
			height: 300rpx;
			// background-color: #4678CC;
			margin: 0 auto;
			.id-input{
				width: 100%;
				height: 300rpx;
				// background-color: #E8EEFA;
				margin-top: 10rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 80rpx;
				color: black;
				border-radius: 10rpx;
				border: 5rpx dashed black;
				img{
					width: 100%;
					height: 300rpx;
				}
			}
		}
		.form-item{
			width: 90%;
			height: 100rpx;
			line-height: 100rpx;
			// background-color: red;
			margin: 0 auto;
			display: flex;
			border-bottom: 2rpx solid gainsboro;
			.form-label{
				width: 100%;
				height: 100%;
				
			}
			input{
				width: 100%;
				height: 100%;
				padding-left: 100rpx;
			}
		}
		.describe{
			width: 80%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background-color: #E8EEFA;
			margin: 0 auto;
			border-radius: 20rpx;
			position: relative;
			top: 100rpx;
			margin-bottom: 120rpx;
			border: 1rpx solid #4678CC;
			p{
				color: #4678CC;
				font-size: 40rpx;
			}
		}
		.apply-icon{
			width: 100%;
			// height: 100%;
			margin: 0 auto;
			text-align: center;
			position: relative;
			top: 30rpx;
			left: 15rpx;
			.iconfont{
				font-size: 100rpx;
				position: absolute;
				top: -100rpx;
				left: 50%;
				margin-left:-60rpx;
			}
		}
	}
}
</style>
